<template>
  <SidebarLayout title="文件管理" logo-to="/apps">
    <template #sidebar>
      <!-- 搜索区域 -->
      <div class="search-section">
        <h4 class="section-title">搜索筛选</h4>
        <el-input
          v-model="searchForm.search"
          placeholder="搜索文件名..."
          clearable
          @keyup.enter="handleSearch"
          class="search-input"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        
        <el-select 
          v-model="searchForm.fileType" 
          placeholder="文件类型" 
          clearable 
          @change="handleSearch"
          class="filter-select"
        >
          <el-option label="全部" value="" />
          <el-option label="MP4" value="mp4" />
          <el-option label="AVI" value="avi" />
          <el-option label="MKV" value="mkv" />
          <el-option label="MOV" value="mov" />
          <el-option label="WMV" value="wmv" />
          <el-option label="FLV" value="flv" />
          <el-option label="WEBM" value="webm" />
        </el-select>
        
        <el-button type="primary" @click="handleSearch" class="search-btn">
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
      </div>
      
      <!-- 排序设置 -->
      <div class="sort-section">
        <h4 class="section-title">排序设置</h4>
        <el-select v-model="searchForm.sortBy" placeholder="排序字段" @change="handleSearch" class="sort-select">
          <el-option label="创建时间" value="created_time" />
          <el-option label="文件大小" value="file_size" />
          <el-option label="文件名" value="file_name" />
        </el-select>
        <el-select v-model="searchForm.sortOrder" placeholder="排序方向" @change="handleSearch" class="sort-select">
          <el-option label="降序" value="desc" />
          <el-option label="升序" value="asc" />
        </el-select>
      </div>
      
      <!-- 操作区域 -->
      <div class="action-section">
        <h4 class="section-title">快速操作</h4>
        <el-button type="success" @click="handleScanAll" :loading="scanning" class="action-btn">
          <el-icon><FolderOpened /></el-icon>
          扫描所有目录
        </el-button>

        <el-button type="danger" @click="handleForceFullRefresh" :loading="forceRefreshing" class="action-btn">
          <el-icon><RefreshRight /></el-icon>
          强制全量刷新
        </el-button>

        <el-button type="warning" @click="handleScrapeAll" :loading="scraping" class="action-btn">
          <el-icon><Download /></el-icon>
          刮削视频信息
        </el-button>

        <el-button type="primary" @click="handleRandomPlay" class="action-btn">
          <el-icon><VideoCameraFilled /></el-icon>
          随机播放
        </el-button>

        <el-button @click="handleRefreshCache" class="action-btn">
          <el-icon><RefreshRight /></el-icon>
          刷新缓存
        </el-button>

        <el-button @click="handleGetStats" class="action-btn">
          <el-icon><DataAnalysis /></el-icon>
          扫描统计
        </el-button>

        <el-button @click="handleReset" class="action-btn">
          <el-icon><Refresh /></el-icon>
          重置筛选
        </el-button>
      </div>
    </template>

    <template #content>
      <el-card class="content-card">
        <template #header>
          <div class="card-header">
            <span>文件列表 ({{ fileList.total || 0 }} 个文件)</span>
            <div class="header-controls">
              <div class="view-controls">
                <el-button-group>
                  <el-button 
                    :type="viewMode === 'table' ? 'primary' : 'default'" 
                    size="small" 
                    @click="viewMode = 'table'"
                  >
                    <el-icon><List /></el-icon>
                    列表
                  </el-button>
                  <el-button 
                    :type="viewMode === 'grid' ? 'primary' : 'default'" 
                    size="small" 
                    @click="viewMode = 'grid'"
                  >
                    <el-icon><Grid /></el-icon>
                    网格
                  </el-button>
                </el-button-group>
              </div>
            </div>
          </div>
        </template>

        <!-- 表格视图 -->
        <el-table
          v-if="viewMode === 'table'"
          :data="fileList.records"
          v-loading="loading"
          stripe
          @row-click="handleRowClick"
          class="file-table"
        >
          <el-table-column label="封面" width="100" align="center">
            <template #default="{ row }">
              <div v-if="row.cover" class="cover-image">
                <el-image
                  :src="row.cover"
                  fit="cover"
                  :preview-teleported="false"
                  class="cover-thumb"
                >
                  <template #error>
                    <div class="image-slot">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
              <div v-else class="no-cover">
                <el-icon><VideoPlay /></el-icon>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="视频信息" min-width="250">
            <template #default="{ row }">
              <div class="file-info">
                <div class="file-details">
                  <div v-if="row.title" class="scraper-title" :title="row.title">
                    {{ row.title }}
                  </div>
                  <div class="file-name" :title="row.fileName">{{ row.fileName }}</div>
                  <div class="file-meta">
                    <el-tag v-if="row.code" size="small" type="primary">{{ row.code }}</el-tag>
                    <el-tag
                      v-if="row.performer"
                      size="small"
                      type="success"
                      class="clickable-tag"
                      @click.stop="handlePerformerClick(row.performer)"
                    >
                      {{ row.performer }}
                    </el-tag>
                  </div>
                  <div class="file-path" :title="row.directory">{{ row.directory }}</div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="文件大小" width="120" align="center">
            <template #default="{ row }">
              <el-tag>{{ row.fileSizeReadable }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="文件类型" width="100" align="center">
            <template #default="{ row }">
              <el-tag type="info">{{ row.fileType.toUpperCase() }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="播放进度" width="180" align="center">
            <template #default="{ row }">
              <div v-if="isVideoFile(row.fileType) && row.progressPercent !== undefined" class="progress-container">
                <el-progress
                  :percentage="Math.round(row.progressPercent)"
                  :stroke-width="12"
                  :show-text="true"
                  :format="(percent: number) => `${percent}%`"
                  :color="getProgressColors()"
                  text-inside
                  class="progress-bar"
                />
                <div v-if="row.currentTime && row.duration" class="time-display">
                  {{ formatTime(row.currentTime) }} / {{ formatTime(row.duration) }}
                </div>
              </div>
              <div v-else-if="isVideoFile(row.fileType)" class="no-progress">
                <el-progress
                  :percentage="0"
                  :stroke-width="12"
                  :show-text="true"
                  :format="() => '未观看'"
                  color="#f0f0f0"
                  text-inside
                  class="progress-bar unwatched"
                />
              </div>
              <div v-else class="non-video">
                <el-text type="info" size="small">-</el-text>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="创建时间" width="180" align="center">
            <template #default="{ row }">
              {{ row.createdTime }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="100" align="center">
            <template #default="{ row }">
              <el-button
                type="primary"
                size="small"
                @click.stop="handlePlayVideo(row)"
              >
                播放
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 网格视图 -->
        <div v-else-if="viewMode === 'grid'" v-loading="loading" class="file-grid">
          <div
            v-for="row in fileList.records"
            :key="row.id"
            class="file-card"
            @click="handlePlayVideo(row)"
          >
            <!-- 封面图片 -->
            <div class="card-cover">
              <el-image
                v-if="row.cover"
                :src="row.cover"
                fit="cover"
                :preview-teleported="false"
                class="cover-img"
              >
                <template #error>
                  <div class="image-error">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <div v-else class="no-cover-placeholder">
                <el-icon class="placeholder-icon"><VideoPlay /></el-icon>
              </div>
            </div>

            <div class="card-body">
              <!-- 刮削标题 -->
              <div v-if="row.title" class="video-title" :title="row.title">
                {{ row.title }}
              </div>

              <!-- 文件名 -->
              <div class="file-name" :title="row.fileName">{{ row.fileName }}</div>

              <!-- 刮削元数据 -->
              <div v-if="row.code || row.performer" class="video-meta">
                <el-tag v-if="row.code" size="small" type="primary">{{ row.code }}</el-tag>
                <el-tag
                  v-if="row.performer"
                  size="small"
                  type="success"
                  class="clickable-tag"
                  @click.stop="handlePerformerClick(row.performer)"
                >
                  {{ row.performer }}
                </el-tag>
              </div>

              <!-- 播放进度 -->
              <div v-if="isVideoFile(row.fileType)" class="progress-section">
                <div v-if="row.progressPercent !== undefined" class="progress-container">
                  <el-progress
                    :percentage="Math.round(row.progressPercent)"
                    :stroke-width="8"
                    :show-text="true"
                    :format="(percent: number) => `${percent}%`"
                    :color="getProgressColors()"
                    text-inside
                    class="progress-bar"
                  />
                  <div v-if="row.currentTime && row.duration" class="time-display">
                    {{ formatTime(row.currentTime) }} / {{ formatTime(row.duration) }}
                  </div>
                </div>
                <div v-else class="no-progress">
                  <el-text type="info" size="small">未观看</el-text>
                </div>
              </div>
            </div>

            <div class="card-footer">
              <div class="file-time">{{ row.createdTime }}</div>
              <div class="file-size">{{ row.fileSizeReadable }}</div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="searchForm.pageNo"
            v-model:page-size="searchForm.pageSize"
            :page-sizes="[12, 24, 48, 96]"
            :total="Number(fileList.total) || 0"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageChange"
            @current-change="handlePageChange"
          />
        </div>
      </el-card>
    </template>
  </SidebarLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Search, Refresh, FolderOpened, RefreshRight, DataAnalysis, VideoPlay, List, Grid, VideoCameraFilled, Download, Picture } from '@element-plus/icons-vue'
import { fileManagerApi, type FileQueryRequest, type FileIndexVO, type PageResult } from '@/modules/file/api/fileManager.ts'
import SidebarLayout from '@/components/SidebarMenu.vue'

const router = useRouter()
const route = useRoute()

// 响应式数据
const loading = ref(false)
const scanning = ref(false)
const scraping = ref(false)
const forceRefreshing = ref(false)
const viewMode = ref<'table' | 'grid'>('grid')

// 从 URL 读取初始参数
const initSearchForm = (): FileQueryRequest => {
  return {
    pageNo: Number(route.query.pageNo) || 1,
    pageSize: Number(route.query.pageSize) || 12,
    search: String(route.query.search || ''),
    fileType: String(route.query.fileType || ''),
    sortBy: String(route.query.sortBy || 'created_time'),
    sortOrder: String(route.query.sortOrder || 'desc')
  }
}

// 搜索表单
const searchForm = reactive<FileQueryRequest>(initSearchForm())

// 文件列表
const fileList = ref<PageResult<FileIndexVO>>({
  records: [],
  total: 0,
  current: 1,
  size: 10
})

// 计算属性：检查是否有视频文件
// 移除了 hasVideoFiles 和 videoFiles 计算属性，随机播放现在由后端处理

// 更新 URL 查询参数
const updateUrlQuery = (useReplace = false) => {
  const query: Record<string, string> = {}

  if (searchForm.pageNo !== 1) {
    query.pageNo = String(searchForm.pageNo)
  }
  if (searchForm.pageSize !== 12) {
    query.pageSize = String(searchForm.pageSize)
  }
  if (searchForm.search && searchForm.search.trim() !== '') {
    query.search = searchForm.search
  }
  if (searchForm.fileType && searchForm.fileType.trim() !== '') {
    query.fileType = searchForm.fileType
  }
  if (searchForm.sortBy && searchForm.sortBy !== 'created_time') {
    query.sortBy = searchForm.sortBy
  }
  if (searchForm.sortOrder && searchForm.sortOrder !== 'desc') {
    query.sortOrder = searchForm.sortOrder
  }

  // 根据参数决定是否产生历史记录
  // useReplace=true: 替换当前历史(翻页时)
  // useReplace=false: 产生新历史(搜索、筛选时)
  if (useReplace) {
    router.replace({ query })
  } else {
    router.push({ query })
  }
}

// 获取文件列表
const getFileList = async (useReplace = false) => {
  loading.value = true
  try {
    const result = await fileManagerApi.getFileList(searchForm)
    fileList.value = result
    // 更新 URL 查询参数
    updateUrlQuery(useReplace)
  } catch (error) {
    console.error('获取文件列表失败:', error)
    ElMessage.error('获取文件列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索文件
const handleSearch = () => {
  searchForm.pageNo = 1
  getFileList(false) // 搜索产生新历史记录
}

// 分页改变
const handlePageChange = () => {
  getFileList(true) // 翻页替换当前历史记录
}

// 重置搜索
const handleReset = () => {
  Object.assign(searchForm, {
    pageNo: 1,
    pageSize: 12,
    search: '',
    fileType: '',
    sortBy: 'created_time',
    sortOrder: 'desc'
  })
  getFileList(false) // 重置产生新历史记录
}

// 扫描所有目录
const handleScanAll = async () => {
  scanning.value = true
  try {
    const result = await fileManagerApi.scanAllDirectories()
    ElMessage.success(result)
    // 等待几秒后刷新列表
    setTimeout(() => {
      getFileList()
    }, 3000)
  } catch (error) {
    console.error('扫描失败:', error)
    ElMessage.error('扫描失败')
  } finally {
    scanning.value = false
  }
}

// 刮削所有视频
const handleScrapeAll = async () => {
  scraping.value = true
  try {
    const result = await fileManagerApi.scrapeAllVideos()
    ElMessage.success(result + '，刮削过程将在后台进行，请稍后刷新查看结果')
  } catch (error) {
    console.error('刮削失败:', error)
    ElMessage.error('刮削失败')
  } finally {
    scraping.value = false
  }
}

// 强制全量刷新
const handleForceFullRefresh = async () => {
  forceRefreshing.value = true
  try {
    const result = await fileManagerApi.forceFullRefresh()
    ElMessage.success(result + '，后台将按文件修改时间从新到旧扫描')
    // 等待几秒后刷新列表
    setTimeout(() => {
      getFileList(false)
    }, 3000)
  } catch (error) {
    console.error('强制全量刷新失败:', error)
    ElMessage.error('强制全量刷新失败')
  } finally {
    forceRefreshing.value = false
  }
}

// 刷新缓存
const handleRefreshCache = async () => {
  try {
    const result = await fileManagerApi.refreshCache()
    ElMessage.success(result)
    getFileList()
  } catch (error) {
    console.error('刷新缓存失败:', error)
    ElMessage.error('刷新缓存失败')
  }
}

// 获取扫描统计
const handleGetStats = async () => {
  try {
    const result = await fileManagerApi.getScanStats()
    ElMessage.info(result)
  } catch (error) {
    console.error('获取统计失败:', error)
    ElMessage.error('获取统计失败')
  }
}

// 行点击事件
const handleRowClick = (row: FileIndexVO) => {
  console.log('点击文件:', row.fileName)
}

// 播放视频
const handlePlayVideo = (row: FileIndexVO) => {
  // 在新窗口中打开视频播放页面，使用文件详情API
  const videoUrl = router.resolve({
    name: 'VideoPlayer',
    params: { id: row.id }
  }).href
  
  window.open(videoUrl, '_blank')
}

// 随机播放视频
const handleRandomPlay = async () => {
  try {
    // 调用后端API随机获取一个视频
    const randomVideo = await fileManagerApi.getRandomVideo()
    
    // 显示随机选择的视频信息
    ElMessage.success(`随机播放: ${randomVideo.fileName}`)
    
    // 在新窗口中打开视频播放页面
    const videoUrl = router.resolve({
      name: 'VideoPlayer',
      params: { id: randomVideo.id }
    }).href
    
    window.open(videoUrl, '_blank')
  } catch (error) {
    console.error('随机播放失败:', error)
    ElMessage.error('随机播放失败，请稍后重试')
  }
}

// 点击performer标签进行搜索
const handlePerformerClick = (performer: string) => {
  // 设置搜索关键词为performer
  searchForm.search = performer
  // 重置到第一页
  searchForm.pageNo = 1
  // 刷新列表 (产生新历史记录)
  getFileList(false)
  // 显示提示
  ElMessage.success(`搜索演员: ${performer}`)
}

// 判断是否为视频文件
const isVideoFile = (fileType: string) => {
  const videoTypes = ['mp4', 'avi', 'mkv', 'mov', 'wmv', 'flv', 'webm', 'mpg', 'mpeg', '3gp', 'asf', 'rm', 'rmvb']
  return videoTypes.includes(fileType.toLowerCase())
}

// 获取进度条颜色配置（支持渐变）
const getProgressColors = () => {
  return [
    { color: '#f56c6c', percentage: 20 },   // 红色 - 刚开始
    { color: '#e6a23c', percentage: 40 },   // 橙色 - 继续观看
    { color: '#5cb87a', percentage: 60 },   // 绿色 - 观看中
    { color: '#1989fa', percentage: 80 },   // 蓝色 - 快完成
    { color: '#6f7ad3', percentage: 100 }   // 紫色 - 已完成
  ]
}

// 格式化时间
const formatTime = (seconds: number): string => {
  if (isNaN(seconds) || seconds < 0) return '00:00'
  
  const hrs = Math.floor(seconds / 3600)
  const mins = Math.floor((seconds % 3600) / 60)
  const secs = Math.floor(seconds % 60)
  
  if (hrs > 0) {
    return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  } else {
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  }
}

// 监听路由查询参数变化（浏览器前进/后退）
watch(
  () => route.query,
  () => {
    // 只在查询参数变化时才更新搜索表单
    const newForm = initSearchForm()
    if (JSON.stringify(newForm) !== JSON.stringify(searchForm)) {
      Object.assign(searchForm, newForm)
      // 浏览器前进后退时，直接加载数据，不修改URL
      loading.value = true
      fileManagerApi.getFileList(searchForm)
        .then(result => {
          fileList.value = result
        })
        .catch(error => {
          console.error('获取文件列表失败:', error)
          ElMessage.error('获取文件列表失败')
        })
        .finally(() => {
          loading.value = false
        })
    }
  }
)

// 组件挂载时获取数据
onMounted(() => {
  getFileList(true) // 初始加载使用replace，避免重复历史
})
</script>

<style scoped>
/* 表格中的封面样式 */
.cover-image {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.cover-thumb {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  cursor: pointer;
}

.no-cover {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--el-fill-color-light);
  border-radius: 4px;
  font-size: 32px;
  color: var(--el-text-color-secondary);
}

.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 24px;
}

/* 刮削信息样式 */
.scraper-title {
  font-weight: 600;
  color: var(--el-color-primary);
  font-size: 15px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-meta {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* 可点击的标签样式 */
.clickable-tag {
  cursor: pointer;
  transition: all 0.2s ease;
}

.clickable-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  opacity: 0.85;
}

/* 侧边栏内容样式 */
.search-section,
.sort-section,
.action-section {
  padding: 20px;
}

.search-section {
  padding-top: 0;
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-regular);
  margin: 0 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.sort-section,
.action-section {
  margin-bottom: 0;
}


.search-input,
.filter-select,
.sort-select {
  width: 100%;
  margin-bottom: 12px;
}

.search-btn,
.action-btn {
  width: 100%;
  margin-bottom: 8px;
  justify-content: flex-start;
}

.action-btn:last-child {
  margin-bottom: 0;
}

/* 内容区样式 */

.content-card {
  height: fit-content;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.view-controls {
  display: flex;
  align-items: center;
}

.file-table {
  margin-bottom: 20px;
}

/* 网格视图样式 */
.file-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.file-card {
  border: 1px solid var(--el-border-color);
  border-radius: 8px;
  background: var(--el-bg-color);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 网格卡片封面样式 */
.card-cover {
  position: relative;
  width: 100%;
  height: 200px;
  background: var(--el-fill-color-light);
  overflow: hidden;
}

.cover-img {
  width: 100%;
  height: 100%;
}

.cover-img :deep(.el-image__inner) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 48px;
  color: var(--el-text-color-secondary);
  background: var(--el-fill-color-light);
}

.no-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color);
}

.placeholder-icon {
  font-size: 64px;
  color: var(--el-text-color-placeholder);
}

.cover-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
}

.type-tag {
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: white;
}

.file-card:hover {
  border-color: var(--el-color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.file-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.file-card .file-icon {
  font-size: 32px;
  color: var(--el-color-primary);
}

.file-type-badge {
  flex-shrink: 0;
}

.file-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}

/* 视频标题（刮削） */
.video-title {
  font-weight: 600;
  color: var(--el-color-primary);
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin-bottom: 4px;
}

/* 视频元数据（刮削） */
.video-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.video-meta .clickable-tag {
  cursor: pointer;
  transition: all 0.2s ease;
}

.video-meta .clickable-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  opacity: 0.85;
}

.file-card .file-name {
  font-weight: 400;
  color: var(--el-text-color-regular);
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.file-card .file-size {
  font-size: 12px;
  color: var(--el-text-color-regular);
}

.file-card .progress-section {
  margin-top: auto;
}

.file-card .progress-container {
  gap: 4px;
}

.file-card .progress-bar {
  max-width: none;
}

.file-card .time-display {
  margin-top: 4px;
}

.file-card .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-top: 1px solid var(--el-border-color-lighter);
  background: var(--el-fill-color-blank);
}

.file-card .file-time {
  font-size: 11px;
  color: var(--el-text-color-secondary);
}

.file-card .card-footer .file-size {
  font-size: 11px;
  color: var(--el-text-color-secondary);
}

.file-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-icon {
  font-size: 24px;
  color: var(--el-color-primary);
}

.file-details {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-weight: 500;
  color: var(--el-text-color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-path {
  font-size: 12px;
  color: var(--el-text-color-regular);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 播放进度样式 */
.progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 8px;
}

.progress-bar {
  width: 100%;
  max-width: 150px;
}

.progress-bar :deep(.el-progress-bar) {
  margin-bottom: 0;
}

.progress-bar :deep(.el-progress-bar__outer) {
  background-color: var(--el-fill-color-light);
  border-radius: 6px;
}

.progress-bar :deep(.el-progress-bar__inner) {
  border-radius: 6px;
  transition: all 0.3s ease;
}

.progress-bar :deep(.el-progress__text) {
  font-size: 11px;
  font-weight: 500;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.time-display {
  font-size: 10px;
  color: var(--el-text-color-secondary);
  text-align: center;
  line-height: 1.2;
  font-family: 'Courier New', monospace;
}

.no-progress {
  width: 100%;
  padding: 4px 8px;
}

.progress-bar.unwatched :deep(.el-progress__text) {
  color: var(--el-text-color-regular);
  font-size: 11px;
  text-shadow: none;
}

.progress-bar.unwatched :deep(.el-progress-bar__outer) {
  background-color: var(--el-fill-color);
}

.non-video {
  text-align: center;
  padding: 8px;
}

/* 文件类型图标样式 */
.video-mp4 { color: #409eff; }
.video-avi { color: #67c23a; }
.video-mkv { color: #e6a23c; }
.video-mov { color: #f56c6c; }
.video-wmv { color: #909399; }
.video-flv { color: #606266; }
.video-webm { color: #b88230; }
.video-default { color: var(--el-color-primary); }

/* 响应式适配 */
@media (max-width: 768px) {

  .file-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .card-cover {
    height: 150px;
  }
  
  .progress-container {
    gap: 4px;
    padding: 2px 4px;
  }
  
  .progress-bar {
    max-width: 120px;
  }
  
  .time-display {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .file-grid {
    grid-template-columns: 1fr;
  }

  .view-controls .el-button {
    flex: 1;
  }

  .card-cover {
    height: 200px;
  }
}

/* 深色模式适配 */

.dark .file-name {
  color: var(--el-text-color-primary);
}

.dark .file-path {
  color: var(--el-text-color-regular);
}

.dark .progress-bar :deep(.el-progress-bar__outer) {
  background-color: var(--el-fill-color-darker);
}

.dark .progress-bar.unwatched :deep(.el-progress-bar__outer) {
  background-color: var(--el-fill-color-dark);
}

.dark .file-card {
  background: var(--el-bg-color);
  border-color: var(--el-border-color);
}

.dark .file-card:hover {
  border-color: var(--el-color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark .file-card .card-footer {
  border-top-color: var(--el-border-color-darker);
}

.dark .scraper-title {
  color: var(--el-color-primary-light-3);
}

.dark .video-title {
  color: var(--el-color-primary-light-3);
}

.dark .no-cover-placeholder {
  background: var(--el-fill-color-dark);
}

.dark .type-tag {
  background: rgba(0, 0, 0, 0.8);
}

.dark .cover-thumb {
  border: 1px solid var(--el-border-color-dark);
}

.dark .no-cover {
  background: var(--el-fill-color-dark);
}
</style>